<template>
	<div class="flex justify-center">
		<div class="w-60%">
			<p class="font-bold text-24px text-#000000 mb-20px flex justify-center">确认</p>

			<p class="text-#86909C text-14px mb-20px">收款人</p>
			<div class="flex items-center p-20px bg-#F1F5FF rounded-8px">
				<img src="/more/avatar.jpeg" alt="" class="w-30px h-30px rounded-4px">
				<div class="ml-10px">
					<p class="text-14px mb-6px">ID: 2547459</p>
					<p class="text-12px text-#C9CDD4">昵称：夏天</p>
				</div>
			</div>

			<p class="text-#86909C text-14px mb-10px mt-30px">数量</p>
			<div class="flex items-center justify-between bg-#F1F5FF p-20px rounded-8px box-border h-50px text-14px text-#000000">
				<p>收款人将收到</p>
				<p>1 USDT</p>
			</div>

			<p class="text-#86909C text-14px mb-10px mt-30px">支付方式</p>
			<div class="flex items-center p-20px rounded-8px  box-border h-50px bg-#F6F6F6">
				<p class="text-#000000">资金账户</p>
			</div>

			<p class="text-#86909C text-14px mb-10px mt-30px">支付币种</p>
			<div class="flex items-center p-20px rounded-8px  box-border h-50px bg-#F6F6F6">
				<img src="/purchase/eth.svg" alt="" class="mr-10px">
				<p class="text-#000000">ETH</p>
			</div>
			

			<div class="mt-60px flex items-center justify-between">
				<el-button type="primary" color="#ECECF0" style="width: 48%;height: 50px;font-size: 18px;" @click="back">
					上一步
				</el-button>
				<el-button type="primary" color="#114CEE" style="width: 48%;height: 50px;font-size: 18px;" @click="confirm">
					确认
				</el-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const emits = defineEmits(['confirm','back'])


function confirm() {
	emits('confirm')
}

function back() {
	emits('back')
}
// 交易货币
const selectPayCoin = ref<any>({
	icon: '/transaction/c2c/quick/CNY.svg',
	coin: 'CNY'
})
const payCoinList = ref<any[]>([
	{
		icon: '/transaction/c2c/quick/CNY.svg',
		coin: 'CNY'
	},
	{
		icon: '/transaction/c2c/quick/VND.svg',
		coin: 'VND'
	}
])
// 选择交易货币
function changePayCoin(val: string) {
	payCoinList.value.forEach((item: any) => {
		if (item.coin === val) {
			selectPayCoin.value.icon = item.icon;
			selectPayCoin.value.coin = item.coin;
		}
	});
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
	height: 30px;
	border:none;
	padding: 0;
	box-shadow:none;
}
::v-deep .el-select__wrapper{
	padding: 0;
	box-shadow:none !important;
}
</style>
<style lang="scss">
.more-transfer-select-popper{
	padding: 0 !important;
	ul{
		padding: 0;
		li{
			padding: 10px 20px;;
			height: 50px;
			>div{
				display: flex;
				align-items: center;
				justify-content: space-between;
				>div{
					display: flex;
					align-items: center;
					>span{
						margin-left: 10px;
					}
				}
				>img{
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	.el-popper__arrow{
		display:none;
	}
}
</style>
